<template>
  <div class="personal">
    <router-link to="/edit_profile">
      <div class="profile">
        <!-- <img src="http://img1.imgtn.bdimg.com/it/u=3757784226,1202878475&fm=26&gp=0.jpg" alt /> -->
        <img :src="userInfo.head_img|joinPath"
             alt="">
        <div class="profile-center">
          <div class="name">
            <span class="iconfont"
                  :class="{'iconxingbienan':userInfo.gender===1,'iconxingbienv':userInfo.gender===0}"></span>{{userInfo.nickname}}
          </div>
          <div class="time">{{new Date(userInfo.create_date).toLocaleDateString()}}</div>
        </div>
        <span class="iconfont iconjiantou1"></span>
      </div>
    </router-link>
    <van-cell title="我的关注"  @click="$router.push({path:'/myFollow'})"
              value="关注的用户"
              is-link />
    <van-cell title="我的跟帖"
              is-link
              value="跟帖/回复" />
    <van-cell title="我的收藏" @click="$router.push({path:'/mySatr'})"
              is-link
              value="文章/视频" />
    <van-cell title="设置"
              is-link />
    <van-button round
                block
                color="rgb(235, 97, 18)"
                @click="exitFn"
                type="danger">退出</van-button>
  </div>
</template>

<script>
import { user } from '@/api/user'
export default {
  created() {
    //   console.log(1,this.$router);
    //   获取用户id
    //   console.log(2,this.$route.query.id);
    // console.log(personal)
    //   添加加载效果
    this.$toast.loading({
      message: '加载中...',
      forbidClick: true,
      duration: 0, // 持续展示 toast
    })
    user(localStorage.getItem('userId')).then((res) => {
      this.userInfo = res.data.data
      this.$toast.clear()
    })
  },
  data() {
    return {
      userInfo: {},
    }
  },
  methods: {
    exitFn() {
      //   移除 token和用户id
      localStorage.removeItem('tokenLine')
      localStorage.removeItem('userId')
      //   跳转到登录页面
      this.$router.push({ path: '/login' })
    },
  },
}
</script>
<style lang="less" scoped>
// 通常情况下，组件库的组件名即为该组件的类名
.van-cell {
  background-color: #eee;
  border-bottom: 1px solid #ddd;
}
.van-button {
  margin: 20px 0;
}
.personal {
  width: 100vw;
  height: 100vh;
  //   padding: 0 20px;
  background-color: #eee;
}
a {
  color: #666;
}
.profile {
  display: flex;
  padding: 20px 10px;
  justify-content: space-between;
  align-items: center;
  border-bottom: 5px #ddd solid;

  img {
    width: (70 / 360) * 100vw;
    height: (70 / 360) * 100vw;
    border-radius: 50%;
  }

  .profile-center {
    flex: 1;
    padding: 0 10px;
  }

  .name {
    span {
      color: #75b9eb;
    }
  }

  .time {
    color: #666;
    font-size: 14px;
    margin-top: 5px;
  }
}
</style>